import React from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import './index.css'
import {Route,Link} from 'react-router-dom'
import CapaCityTable1 from '../capacitymeun/CapaCityTable1'
import CapaCityTable2 from '../capacitymeun/CapaCityTable2'
import CapaCityTable3 from '../capacitymeun/CapaCityTable3'
import CapaCityTable4 from '../capacitymeun/CapaCityTable4'
import CapaCityTable5 from '../capacitymeun/CapaCityTable5'
import ClassiFicationList from '../classification/ClassiFicationList'
import {withRouter } from 'react-router-dom'
import Transport from '../transport/Transport'
import Transport1 from '../transport/Transport1'
import Transport2 from '../transport/Transport2'
import Transport3 from '../transport/Transport3'
import Transport4 from '../transport/Transport4'
import Transport5 from '../transport/Transport5'
import {fullCapacity} from '../../redux/capacitymeun/menuList'
import { ClassMenu}  from '../../redux/classFicationg/classFication'
import ClassIficationList1 from '../classification/ClassIficationList1'
import ClassList from '../classification/ClassList'
import AddClassModel from './AddClassModel'
import {TransportClassList} from '../../redux/transportClass/transportClass'
import { connect } from 'react-redux'
import WxBind from '../WxBind'
import CNameList from '../classification/CNameList'
import Uplate from '../classification/Uplate'
import Company from '../company/Company'
import UserCompany from '../company/UserCompany'
import Employee from '../company/Employee'


const MenuItemGroup = Menu.ItemGroup;
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
@withRouter
@connect(
    state => state,
    { fullCapacity,ClassMenu,TransportClassList }
)
export default class MenuList extends React.Component{
    constructor(){
        super();
        this.state = {
            visible1:false,
            value:1,
            values:'1'
        }
    }
    showModel(){
        this.setState({
            visible1:!this.state.visible1
        })
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.classList.isADD){
            this.props.ClassMenu();
            this.showModel();
        }
        if(nextProps.transport.addClass2){
            this.props.TransportClassList();
            this.showModel();
        }
        
    }
    componentDidMount(){
        console.log(this.props.match.params.id)
        //   switch (this.props.match.params.id){
        //       case '1':
        //       this.setState({
        //         values:1
        //         },()=>{
        //             this.props.history.push('/menuList/CapaCityTable1/1')
        //         })
        //       break;
        //       case '2':
        //       this.setState({
        //         values:1
        //         },()=>{
        //             this.props.history.push('/menuList/CapaCityTable2/2')
        //         })
        //       break;
        //       case '3':
        //       this.setState({
        //         values:1
        //         },()=>{
        //             this.props.history.push('/menuList/CapaCityTable3/3')
        //         })
        //       break;
        //       case '4':
        //       break;
        //       case '5':
        //       this.setState({
        //         values:1
        //         },()=>{
        //             this.props.history.push('/menuList/CapaCityTable5/5')
        //         })
        //       break;
        //       case 6:
        //       break;
        //       case 7:
        //       break;
        //       case 8:
        //       break;
        //       case 9:
        //       break;
        //       default:

        //   }
          if(this.props.match.params.id == 1){
            this.setState({
                values:this.props.match.params.id
             },()=>{
                this.props.history.push('/menuList/CapaCityTable1/1')
             })
            
          }
          else if(this.props.match.params.id == 2){
            this.setState({
                values:1
             },()=>{
                this.props.history.push('/menuList/CapaCityTable2/2')
             })
          }
          else if(this.props.match.params.id == 3){
            this.setState({
                values:1
             },()=>{
                this.props.history.push('/menuList/CapaCityTable3/3')
             })
          }
          else if(this.props.match.params.id == 4){
            this.setState({
                values:1
             },()=>{
                this.props.history.push('/menuList/CapaCityTable5/5')
             })
          }
          else if(this.props.match.params.id == 5){
            this.setState({
                values:this.props.match.params.id
             },()=>{
                // this.props.history.push('/menuList/12')
             })
          }else{
            this.setState({
                values:this.props.match.params.id
             },()=>{
                this.props.history.push('/menuList/12')
             })
              
          }
          
          this.props.ClassMenu();
          this.props.TransportClassList();
        
        
    }
    quanbu(index){
        this.setState({
            values:1
         },()=>{ 
            this.props.history.push('/menuList/CapaCityTable'+index+'/'+index)
         })
    }

    quanbu1(index){
        this.setState({
            values:2
         },()=>{ 
            this.props.history.push('/menuList/'+index)
         })
    }
    quanbu2(value){
        this.setState({
            values:5
         },()=>{ 
            this.props.history.push('/menuList/'+value)
         })
    }
    scrollToAnchor = (anchorName,index) => {
        console.log(anchorName)
        if (anchorName) {
            // 找到锚点
            let anchorElement = document.getElementById(anchorName);
            // 如果对应id的锚点存在，就跳转到锚点
            if(anchorElement) { anchorElement.scrollIntoView(); }
        }
      }
    addModel(value){
        this.setState({
            visible1:true,
            value:value
        })
    }
    render() {
        let ylClassificationDtoList = this.props.classList.ylClassificationDtoList;
        let transportData = this.props.transport.transportData;
        return (
            <Layout>
                <Header className="header">
                <div className="logo" />
                             <Menu
                                onClick={this.handleClick}
                                mode="horizontal"
                                defaultSelectedKeys={['2']}
                                style={{ lineHeight: '64px'}}
                            >
								 <SubMenu key={1} title={<span className="submenu-title-wrapper">找船<Icon type="down" theme="outlined" style={{color:"#d5d4d5"}} /></span>}>
									 <MenuItemGroup >
										 <Menu.Item key="setting:20"><Link to="/findaBoat">快速找船</Link></Menu.Item>
										 <Menu.Item key="setting:21">快速找船</Menu.Item>
									 </MenuItemGroup>
								 </SubMenu>
								 <SubMenu key={2} title={<span className="submenu-title-wrapper">运力管理<Icon type="down" theme="outlined" style={{color:"#d5d4d5"}} /></span>}>
									 <MenuItemGroup >
										 <Menu.Item key="1" onClick={this.quanbu.bind(this,1)}>全部运力 </Menu.Item>
										 <Menu.Item key="setting:2" onClick={this.quanbu.bind(this,2)}>可监控</Menu.Item>
										 <Menu.Item key="setting:3" onClick={this.quanbu.bind(this,3)}>已认证</Menu.Item>
										 <Menu.Item key="setting:4" onClick={this.quanbu.bind(this,4)}>人工认证中</Menu.Item>
									 </MenuItemGroup>
								 </SubMenu>
								 <SubMenu key={3} title={<span className="submenu-title-wrapper">运输管理<Icon type="down" theme="outlined" style={{color:"#d5d4d5"}} /></span>}>
									 <MenuItemGroup >
										 <Menu.Item key="setting:6" onClick={this.quanbu1.bind(this,13)}>正在运输中</Menu.Item>
										 <Menu.Item key="setting:7" onClick={this.quanbu1.bind(this,14)}>已完成运输</Menu.Item>
									 </MenuItemGroup>
								 </SubMenu>
								 <SubMenu  key={8} title={<span className="submenu-title-wrapper">经营分析<Icon type="down" theme="outlined" style={{color:"#d5d4d5"}} /></span>}>
									 <MenuItemGroup >
										 <Menu.Item key="setting:8">经营统计</Menu.Item>
										 <Menu.Item key="setting:9">费用统计</Menu.Item>
									 </MenuItemGroup>
								 </SubMenu>
								 <SubMenu key={4} title={<span className="submenu-title-wrapper">系统配置<Icon type="down" theme="outlined" style={{color:"#d5d4d5"}} /></span>}>
									 <MenuItemGroup >
										 <Menu.Item key="setting:18" onClick={this.quanbu2.bind(this,'company')}>公司配置</Menu.Item>
										 <Menu.Item key="setting:19" onClick={this.quanbu2.bind(this,'employee')}>员工管理</Menu.Item>
									 </MenuItemGroup>
								 </SubMenu>
								 <SubMenu key={7} title={<span className="submenu-title-wrapper"><Icon type="smile" style={{color:"#46a6ff"}} />龙小鱼</span>} style={{float:'right'}}>
									 <MenuItemGroup >
										 <Menu.Item key="setting:17" onClick={this.quanbu2.bind(this,'user')}>个人信息</Menu.Item>
										 <Menu.Item key="setting:17" onClick={this.quanbu2.bind(this,'user')}>退出</Menu.Item>
									 </MenuItemGroup>
								 </SubMenu>
	
								 <SubMenu key={5} title={<span className="submenu-title-wrapper"><Icon type="credit-card" style={{color:"#46a6ff"}} />费用</span>} style={{float:'right'}}>
									 <MenuItemGroup >
										 <Menu.Item key="setting:12">充值</Menu.Item>
										 <Menu.Item key="setting:13">消费记录</Menu.Item>
									 </MenuItemGroup>
								 </SubMenu>
	
								 <SubMenu key={6} title={<span className="submenu-title-wrapper"><Icon type="aliwangwang-o" style={{color:"#46a6ff"}} />客服</span>} style={{float:'right'}}>
									 <MenuItemGroup >
										 <Menu.Item key="setting:14">在线客服</Menu.Item>
										 <Menu.Item key="setting:15">创建工单</Menu.Item>
										 <Menu.Item key="setting:16">建议反馈</Menu.Item>
									 </MenuItemGroup>
								 </SubMenu>


                             </Menu>
                
                </Header>
                <Layout >
                <Sider width={200} style={{ background: '#fff' }}>
                  
                     
                        {
                            this.state.values == '1' ?
                            <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0,background: '#F1F4FA' }}
                            >
                            <SubMenu className = 'colo' key="sub1" title={<span><Icon type="user" />自有运力</span>}>
                     
                            <Menu.Item key="1" onClick={this.quanbu.bind(this,1)}>全部运力 </Menu.Item>
                            <Menu.Item key="2" onClick={this.quanbu.bind(this,2)}>可监控</Menu.Item>
                            <Menu.Item key="3" onClick={this.quanbu.bind(this,3)}>已认证</Menu.Item>
                            <Menu.Item key="4" onClick={this.quanbu.bind(this,4)}>人工认证中</Menu.Item>
                            </SubMenu>
                               <SubMenu key="sub2" title={<span><Icon type="laptop" />运力分类</span>}>
                               {
                                    JSON.stringify(ylClassificationDtoList) == '{}' || !ylClassificationDtoList ?'' :
                                   ylClassificationDtoList.map((item,index)=>
                                      <Menu.Item key={7+index}><Link  to = {'/menuList/classList/'+item.classificationId}>{item.classificationName}</Link></Menu.Item>
                                   )
                               }
                               <Menu.Item onClick={this.addModel.bind(this,1)} key="1118">添加分类</Menu.Item>
                           </SubMenu>
                           </Menu>
                            :
                            this.state.values == 5 ?
                            <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0,background: '#F1F4FA' }}
                            >
                                <SubMenu className = 'colo' key="sub1" title={<span><Icon type="user" />公司管理</span>}>
                                    <SubMenu  key="sub1_1" title="公司信息">
                                        <Menu.Item key="51" onClick={this.quanbu2.bind(this,'company')}>企业信息</Menu.Item>
                                        <Menu.Item key="52" onClick={this.quanbu2.bind(this,'user')}>个人信息</Menu.Item>
                                    </SubMenu>
                                    <Menu.Item key="53" onClick={this.quanbu2.bind(this,'employee')}>员工管理</Menu.Item>
                                </SubMenu>
                                </Menu>
                            :
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%', borderRight: 0,background: '#F1F4FA' }}
                                >
                            <SubMenu className = 'colo' key="sub1" title={<span><Icon type="user" />我的计划</span>}>
                     
                            <Menu.Item key="1" onClick={this.quanbu1.bind(this,11)}>全部</Menu.Item>
                            <Menu.Item key="2" onClick={this.quanbu1.bind(this,12)}>未开始</Menu.Item>
                            <Menu.Item key="3" onClick={this.quanbu1.bind(this,13)}>运输中</Menu.Item>
                            <Menu.Item key="4" onClick={this.quanbu1.bind(this,14)}>已完成</Menu.Item>
                            <Menu.Item key="5" onClick={this.quanbu1.bind(this,15)}>已延期</Menu.Item>
                            <Menu.Item key="6" onClick={this.quanbu1.bind(this,16)}>已中止</Menu.Item>
                            </SubMenu>
                            <SubMenu key="sub2" title={<span><Icon type="laptop" />计划分类</span>}>
                               {
                                   JSON.stringify(transportData) == '{}' || !transportData? '' :
                                   transportData.map((item,index)=>
                                      <Menu.Item key={7+index}><Link  to = {'/menuList/classList/'+item.planClassId}>{item.planClassName}</Link></Menu.Item>
                                       
                                      )  
                               }
                               <Menu.Item onClick={this.addModel.bind(this,2)} key="1118">添加分类</Menu.Item>
                           </SubMenu>
                            </Menu>
                        }
                </Sider>
                <Layout >
                    <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>List</Breadcrumb.Item>
                    <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb>
                    <Content style={{ background: '#fff' }}>
                            <Route  path='/menuList/capaCityTable1/:id'  component={CapaCityTable1}> </Route>
                            <Route  path='/menuList/capaCityTable2/:id'  component={CapaCityTable2}> </Route>
                            <Route  path='/menuList/capaCityTable3/:id'  component={CapaCityTable3}> </Route>
                            <Route  path='/menuList/capaCityTable4/:id'  component={CapaCityTable4}> </Route>
                            <Route  path='/menuList/capaCityTable5/:id'  component={CapaCityTable5}> </Route>
                            <Route  path='/menuList/cNameList'  component={CNameList}> </Route>
                            <Route  path='/menuList/11'  component={Transport}> </Route>
                            <Route  path='/menuList/12'  component={Transport1}> </Route>
                            <Route  path='/menuList/13'  component={Transport2}> </Route>
                            <Route  path='/menuList/14'  component={Transport3}> </Route>
                            <Route  path='/menuList/15'  component={Transport4}> </Route>
                            <Route  path='/menuList/16'  component={Transport5}> </Route>
                            <Route  path='/menuList/classification/:id'  component={ClassiFicationList}> </Route>
                            <Route  path='/menuList/classification1/:id'  component={ClassIficationList1}> </Route>
                            <Route  path='/menuList/classList/:id'  component={ClassList}> </Route>
                            <Route  path='/menuList/wxBind'  component={WxBind}> </Route>
                            <Route  path='/menuList/Uplate'  component={Uplate}> </Route>
                            <Route  path='/menuList/user'  component={UserCompany}> </Route>
                            <Route  path='/menuList/company'  component={Company}> </Route>
                            <Route  path='/menuList/employee'  component={Employee}> </Route>
                    </Content>
                </Layout>
            </Layout>
            <AddClassModel value={this.state.value} visible = {this.state.visible1} showModel = {this.showModel.bind(this)}/>
  </Layout>
        )
    }
}